<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本语法</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		
		<!-- 
			在实际开发中,一个页面可能会导入多个js文件,那么就有可能出现一种特殊情况:
			后面导入的js中也对$进行了特殊赋值,例如:base.js,则就会以后者来决定$的归属,那么前面导入的jquery的$就会失效
			所以jquery中也想到了这个情况,处理方式如下:
			a.把$改成jQuery即可,注意,Q是大写的
			b.var jq = $.noConflict()方法来解除$的权限,并且把它重新赋值给指定变量
		 -->
		<!-- <script src="..."></script> -->
		
		<!-- 
			jquery的优点:
			1.极大的简化代码
			2.实现JS和HTML的完美分离,便于后期的维护
		 -->
		<!-- 
			基本语法:拿到什么做什么
			$(function(){
				$(selector).action();
			});
			
			$ 表示jQuery本身
			selector表示选择器,即css选择器
			action()表示jq中的函数
		 -->
		<script>
			/* function init() {
				var ps = document.getElementsByTagName("p");
				for(var i = 0;i < ps.length;i++){
					ps[i].style.display = "none";
				}
			} */
			
			//页面加载完毕事件
			/* jQuery(document).ready(function(){
				$("p").hide();//隐式迭代,无论是一个还是多个都可以操作
			}); */
			
			//jQuery = $,所以可以简化
			//页面加载完毕事件还可以简化
			$(function(){
				$("p").css("color","red");//隐式迭代,无论是一个还是多个都可以操作
			});
			
			//解除$的权限,并且把它重新赋值给指定变量,一般不用,只在发生$冲突时去使用!!!
			/* var jq = $.noConflict();
			jq(function(){
				jq("p").css("color","red");//隐式迭代,无论是一个还是多个都可以操作
			}); */
		</script>
	</head>
	<!-- <body onload="init()"> -->
	<body>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
		<p>这是一个段落</p>
	</body>
</html>
